<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 2023-09-13 10:33:02
 * @LastEditTime: 2023-09-14 16:45:37
 * @LastEditors: 呆龙
-->
<!-- simple -->
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      mode="default"
    />
    <Editor
      style="overflow-y: hidden"
      :style="{ height: height + 'px' }"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { throttle } from "lodash";
// import { message } from "ant-design-vue";
const editorRef = shallowRef();
// 定义props
// height 高度  建议传300以上否则控制台会警告
// name 当页面使用多个富文本的时候传输唯一name 用于分别
// value 初始化数据
const props = defineProps<{
  height?: number;
  name?: string;
  value?: string;
}>();
const emits = defineEmits<{
  (event: "writeOver", key: string, data: string): void;
}>();
// 页面开始后监听props.value 内容如果为异步获取  当内容获取到后赋值到富文本里面 可以修改
onMounted(() => {
  if (true) {
    editorConfig.readOnly = true;
  }
  watch(
    () => props.value,
    () => {
      valueHtml.value = props.value as string;
    }
  );
});
// 内容 HTML
const valueHtml = ref("");
// 监听内容变化  内容变化后调用自定义事件 并把内容传输给调用的组件
watch(
  () => valueHtml.value,
  () => {
    throttleFun(valueHtml.value);
  }
);
const onWriteOver = (text: string) => {
  emits("writeOver", props.name!, text);
};
const throttleFun = throttle(onWriteOver, 500);
/**
 * wangEditor 工具栏的配置信息
 */
const toolbarConfig: Partial<IToolbarConfig> = {
  /* 工具栏配置 */
  excludeKeys: ["emotion", "group-video", "insertTable", "codeBlock"],
};
const editorConfig: Partial<IEditorConfig> = {
  MENU_CONF: {},
  placeholder: "请输入正文",
};

editorConfig.MENU_CONF!["uploadImage"] = {
  // 限制图片数量
  maxNumberOfFiles: 6,
  // 服务端的地址
  server: "https://c7d1b689-cd39-420a-83f9-733c744450c6.bspapp.com/upImage",
  // 上传之前触发
  // async customUpload(file: File, insertFn: InsertFnType) {
  //   if (file.size > 2101440) {
  //     message.error("图片最大不能超出2MB!");
  //     return;
  //   }
  //   const reader = new FileReader();
  //   reader.readAsDataURL(file);
  //   reader.onload = (e: any) => {
  //     var bess = e.target.result.split(",");
  //     service({
  //       url: "https://c7d1b689-cd39-420a-83f9-733c744450c6.bspapp.com/upImage",
  //       method: "post",
  //       data: { file: bess[1], filename: file.name },
  //     }).then((res: any) => {
  //       state.storePic = {
  //         url: res.data.fileID,
  //         name: file.name,
  //       };
  //       storeArticle.ArticleForm.articleImg.push(res.data.fileID);
  //       insertFn(state.storePic.url, state.storePic.name, state.storePic.url);
  //     });
  //   };
  // },
};
const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
// type InsertFnType = (url: string, alt: string, href: string) => void;
</script>

<style scoped></style>
